<template>
  <div class="laptop-section">
    <h2>笔记本专区</h2>
    <div class="product" v-for="item in laptopProducts" :key="item.id">
      <h3>{{ item.name }}</h3>
      <p>价格: ¥{{ item.price }}</p>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const laptopProducts = [
  {
    id: 3,
    name: "游戏本 X1",
    price: 8999,
    description: "高性能游戏本，畅玩3A 大作",
  },
  { id: 4, name: "超极本 S1", price: 6999, description: "轻薄便携，商务首选" },
];
</script>

<style scoped>
.laptop-section {
  padding: 1rem;
}
.product {
  border: 1px solid #eee;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 4px;
}
</style>
